<div class="card">
  <h6 class="card-header">Create Service</h6>
  <div class="card-body">
    <div class="row mb-3">
      <div class="col">
        <label class="form-label">Title</label>
        <input
          type="text"
          class="form-control"
          ng-model="$ctrl.model.title"
          ng-blur="$ctrl.gennerateName()"
        />
      </div>
      <div class="col">
        <label class="form-label">Name</label>
        <input type="text" class="form-control" ng-model="$ctrl.model.name" />
      </div>
    </div>
    <div class="mb-3">
      <label class="form-label">Type</label>
      <div
        class="btn-group btn-group-sm btn-group-toggle d-flex w-100"
        role="group"
        data-bs-toggle="buttons"
      >
        <label
          ng-repeat="type in $ctrl.localizeSettings.serviceTypes track by $index"
          ng-switch="type"
          ng-class="{active: $index === $ctrl.model.type}"
          class="btn btn-primary text-white btn-block mt-0"
          ng-click="$ctrl.model.type=$index;"
        >
          <input
            ng-model="$ctrl.model.type"
            type="radio"
            value="{{$index}}"
            class="form-check-input"
            id="model_type_{{$index}}"
          />
          <span ng-switch-when="System" class="" title="{{type}}"
            ><i class="fas fa-cog"></i> System</span
          >
          <span ng-switch-when="Page" class="" title="{{type}}"
            ><i class="far fa-file"></i> Page</span
          >
          <span ng-switch-when="Post" class="" title="{{type}}"
            ><i class="far fa-newspaper"></i> Post</span
          >
          <span ng-switch-when="Module" class="" title="{{type}}"
            ><i class="fas fa-puzzle-piece"></i> Module</span
          >
          <span ng-switch-when="Service" class="" title="{{type}}"
            ><i class="fas fa-layer-group"></i> Service</span
          >
        </label>
      </div>
    </div>
    <div class="mb-3">
      <label class="form-label">Description</label>
      <textarea
        class="form-control"
        ng-model="$ctrl.model.description"
      ></textarea>
    </div>
  </div>
</div>
